.theme-layout {
  width: 100%;
  height: 100%;
  padding: 12px;
  background: rgb(240, 242, 245);

  .theme-layout-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .theme-layout-header {
      display: flex;
      justify-content: flex-end;
      padding-bottom: 8rem;
    }

    .theme-layout-content {
      flex: auto;

      :global {
        .ant-ribbon-wrapper {
          height: 100%;

          #themePreview {
            height: 100%;
            display: flex;
            flex-direction: column;
          }
        }
      }

      .layout-content-header {
        height: 48px;
      }

      .layout-content-wrapper {
        flex: auto;
      }
    }
  }
}

@clsName: theme-list;

.@{clsName}-layout {
  width: 100%;
  height: 100%;
  background: #ffffff;

  .ant-spin-nested-loading {
    height: 100%;
    width: 100%;

    .ant-spin-container {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      display: flex;
      flex-direction: column;

      .@{clsName}-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.8rem;
      }

      .@{clsName}-content {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0rem 0.8rem 0.8rem 0.8rem;
      }
    }
  }
}
